<!-- 流程分析 -->
<template>
  <div class="chartWrap">
    <div class="header">
      <a-space>
        <FormProcess :onCallBack="onBackData" :formData="processData" dataIndex="company" :menuId="ids"></FormProcess>
        <FormData :formData="processData" :onCallBack="onBackData" dataIndex="selectDate" :allowClear="false"
          v-if="![9979].includes(Number(ids))">
        </FormData>
        <template v-if="[9979].includes(Number(ids))">
          <a-space>
            <a-button type="default" class="defaultButton" @click="onRefresh" :disabled="syncDisabled">
              <Icons type="sync"></Icons>
            </a-button>
            <AddButton :otherData="{ company: processData.company }" :onRefresh="onRefresh"></AddButton>
          </a-space>
        </template>
      </a-space>
    </div>
    <div class="content">
      <div class="contentRight">
        <a-row class="row" :gutter="[12, 12]" v-if="[9978, 2].includes(Number(ids))">
          <template v-if="ids == 2">
            <a-col :span="showChart[item].colSpan" v-for="item in Object.keys(showChart)" :key="item">
              <!-- 流程分析 -->
              <a-card :title="showChart[item].title" size="small" style="width: 100%; min-height: 350px" hoverable
                :class="`${item}Wrap`">
                <template v-if="showChart[item].type == 'calendar'">
                  <div class="itemInfo">
                    <a-calendar :value="calendarValue" mode="month" style="width: auto; height: auto"
                      :validRange="validRange">
                      <li slot="dateCellRender" slot-scope="value" class="calendarNum">
                        {{ getValue(value) }}
                      </li>
                    </a-calendar>
                  </div>
                </template>
                <template v-else-if="['column', 'pie'].includes(showChart[item].type)">
                  <a slot="extra" href="#" v-if="showChart[item].order && showChart[item].data.length > 0"
                    @click="handChangOrder(item, showChart[item].order)">
                    <template v-if="showChart[item].order == 'desc'">
                      <span>倒序</span>
                    </template>
                    <template v-else-if="showChart[item].order == 'asc'">
                      <span>正序</span>
                    </template>
                  </a>
                  <div class="itemInfo">
                    <ManageEchart v-if="Array.isArray(showChart[item].data) && showChart[item].data.length > 0"
                      :type="showChart[item].type" :setting="showChart[item].setting || {}"
                      :data="formatChartData(item, showChart[item].order)">
                    </ManageEchart>
                    <a-empty v-else></a-empty>
                  </div>
                </template>
                <template v-else-if="['table'].includes(showChart[item].type)">
                  <a-table :border="false" :columns="column" :data-source="showChart[item].data"
                    :scroll="{ x: 700, y: 'calc(34vh - 10px)' }" size="small" row-key="id" style="height: 35vh"
                    :pagination="false">
                    <span slot="options" slot-scope="text, record">
                      <ShowModal :record="record"></ShowModal>
                    </span>
                  </a-table>
                </template>
              </a-card>
            </a-col>
          </template>
          <!-- 巡检流程挖掘 -->
          <template v-else-if="ids == 9978">
            <template v-if="Object.keys(staticData).length > 0">
              <a-col :span="digObj[item].colSpan" v-for="item in Object.keys(digObj)" :key="item">
                <a-card class="cardWrap-item" :title="digObj[item].title" size="small"
                  style="width: 100%; min-height: 350px" hoverable :class="`${item}Wrap`">
                  <ProCessItem :items="staticData[item]" :cardItem="digObj[item]" :type="digObj[item].type"
                    :processData="processData" :extraData="staticData['hiddenLocalDayList']">
                  </ProCessItem>
                </a-card>
              </a-col>
            </template>
            <template v-else>
              <a-spin :spinning="loading" class="spinWrap">
                <a-empty description="请选择流程"></a-empty>
              </a-spin>
            </template>
          </template>
        </a-row>
        <template v-else-if="ids == 9979">
          <TixTable ref="TixTable" :menuId="ids" :processData="processData"></TixTable>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import FormProcess from "../components/FormProcess";
import FormData from "../components/FormData";
import moment from "moment";
import ManageEchart from "@/components/ManageEchart/ManageEchart";
import { tempColumn } from "../js/js";
import ShowModal from "../components/ShowModal";
import ProCessItem from './components/ProCessItem';
import { demoData } from './js';
import TixTable from './Tix/TixTable.vue'
import AddButton from './Tix/AddButton.vue';
import Icons from '../components/Icons';

export default {
  name: "",
  props: {
    ids: {
      type: [String, Number],
    }
  },
  components: {
    FormProcess,
    FormData,
    ManageEchart,
    ShowModal,
    ProCessItem,
    TixTable,
    AddButton,
    Icons,
  },
  data() {
    return {
      /* 流程分析用到的数据 */
      processData: {
        selectDate: moment().format("YYYY-MM"),
        company: "",
      },
      calendarValue: moment().format("YYYY-MM-DD"),
      // 流程分析列表
      showChart: {
        zeroBox: {
          title: "数量分布",
          colSpan: 12,
          type: "calendar",
          data: [],
        },
        // oneBox: {
        //   title: "发起频率",
        //   colSpan: 12,
        //   type: "category",
        //   data: [],
        // },
        // towBox: {
        //     title: '审批时长(小时)',
        //     colSpan: 12,
        //     type: 'bar',
        //     data: [],
        // },
        threeBox: {
          title: "发起人频率",
          colSpan: 12,
          type: "column",
          order: "desc",
          data: [],
          setting: {
            label: {
              color: "#000000",
              fontSize: 10,
            },
            //   tooltip: {
            //     company: ['号', '条'],
            //   },
          },
        },
        initiatingPieChart: {
          title: "闭环分析",
          colSpan: 12,
          type: "pie",
          data: [],
          setting: {
            // radius: ["70%", "80%"],
          },
        },
        initiatingPieChartUn: {
          title: "未闭环流程",
          colSpan: 12,
          type: "table",
          data: [],
          setting: {
            // radius: ["70%", "80%"],
          },
        },
      },
      digObj: {
        monthList: {
          title: '',
          titles: '巡检流程日发起量流程分析',
          xTitle: '日期',
          yTitle: '发起量',
          colSpan: 12,
          type: "bar",
          data: [],
        },
        dayHourList: {
          title: '',
          titles: '巡检流程日发起量流程分析',
          xTitle: '日期',
          yTitle: '时刻',
          colSpan: 12,
          type: "table",
          data: [],
        },
        hiddenDangerLoop: {
          title: '',
          titles: '巡检流程月发起量人员分析',
          xTitle: '',
          yTitle: '',
          colSpan: 12,
          type: "tableList",
          data: [],
        },
        otherFlowCompare: {
          title: '',
          titles: '同公司下巡检流程对比分析',
          xTitle: '',
          yTitle: '',
          colSpan: 12,
          type: "strip",
          data: [],
        },
        hiddenLocalList: {
          title: '',
          titles: '各区域巡检量对比分析',
          xTitle: '区域',
          yTitle: '数量',
          colSpan: 24,
          type: "barDoub",
          data: [],
        },
      },
      column: [],
      staticData: {},
      loading: false,
    };
  },
  mounted() {
    // this.getData();
    // 测试数据
    // this.staticData = demoData;
  },
  methods: {
    // 获取流程数据
    getProcessData() { },
    // 选择框返回的值
    onBackData(val, dataI) {
      let obj = this.processData;
      obj[dataI] = val;
      this.processData = JSON.parse(JSON.stringify(obj));
    },
    // 展示日历中 的数据
    getValue(e) {
      let nowD = moment(e).format("YYYY-MM-DD");
      let list = JSON.parse(JSON.stringify(this.showChart.zeroBox.data));
      let str = "";
      if (nowD && Array.isArray(list) && list.length > 0) {
        let items = list.find((val) => moment(val.label).format("YYYY-MM-DD") == nowD);
        if (items) {
          str = items.num || items.value;
        }
      }
      return str == 0 ? "" : str;
    },
    getData(aParams) {
      let params = {
        ...this.processData,
        ...aParams,
      };
      this.calendarValue = moment(`${params.selectDate}-01`).format("YYYY-MM-DD");
      if (params.company == "") {
        return;
      }
      this.postAxios(this.$ProcessSearch, params)
        .then((res) => {
          if (res.code == 200) {
            let data = res.data;
            let tempShowChart = this.showChart;
            let arr = Object.keys(tempShowChart);
            arr.filter((val) => {
              tempShowChart[val].data = data[val].map((vals) => ({
                ...vals,
                label: vals.name || vals.label,
                value: vals.num || vals.value,
              }));
            });
            this.showChart = tempShowChart;
          }
        })
        .catch(() => { })
        .finally(() => { });
    },
    onCalendarSelect(date) { },
    formatChartData(item, sort) {
      let arr = [];
      let list = JSON.parse(JSON.stringify(this.showChart[item].data));
      if (sort) {
        if (sort == "asc") {
          arr = list.filter((val, ind) => list.length - 10 <= ind);
        } else if (sort == "desc") {
          let tempArr = list;
          tempArr.filter((val, ind) => {
            arr.unshift(val);
          });
          arr = arr.filter((val, ind) => arr.length - ind <= 10);
        }
      } else {
        arr = list.map((val) => {
          return { ...val, name: val.label };
        });
      }
      return arr;
    },
    handChangOrder(item, type) {
      let tempObject = JSON.parse(JSON.stringify(this.showChart));
      if (type == "desc") {
        tempObject[item]["order"] = "asc";
      } else if (type == "asc") {
        tempObject[item]["order"] = "desc";
      }
      this.showChart = tempObject;
    },
    getInfo(aParams) {
      let params = {
        ...aParams,
      };
      this.loading = true;
      this.staticData = {};
      this.getAxios(this.$inspectionExcavationDesc, params)
        .then((res) => {
          if (res.code == 200) {
            this.staticData = {
              ...res.data
            };
          }
        })
        .catch(() => { })
        .finally(() => {
          this.loading = false;
        });
    },
    onRefresh() {
      this.$refs.TixTable.getList();
    }
  },
  computed: {
    validRange(e) {
      let nowData = this.processData.selectDate;
      let arr = [moment(nowData).startOf("month"), moment(nowData).endOf("month")];
      return arr;
    },
    syncDisabled() {
      let res = false;
      if (this.ids == 9979) {
        if (this.processData.company == '') {
          res = true;
        }
      }
      return res;
    }
  },
  watch: {
    processData: {
      handler(nVal, oVal) {
        if (this.ids == 9978) {
          this.getInfo(nVal);
        } else if (this.ids == 9979) {
          // 巡检流程提醒 在子组件请求数据
        } else {
          this.getData(nVal);
        }
        if (this.ids != 9979) {
          this.onCalendarSelect(moment(`${nVal.date}-${moment().format("DD")}`));
        }
      },
      deep: true,
    },
    ids: {
      handler(nVal, oVal) {
        if (nVal == 3) {
          this.column = tempColumn["initiatingPieChartUn"];
        }
      },
      deep: true,
      immediate: true,
    }
  },
};
</script>
<style lang="less" scoped>
// 流程分析
.chartWrap {
  height: 100%;
  width: 100%;

  .header {
    height: 40px;
    width: 100%;
    padding: 0px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--backColor);
  }

  .content {
    display: flex;
    margin-top: 10px;

    .contentLeft {
      width: 300px;
      height: 300px;
      flex-shrink: 0;
      background-color: pink;
    }

    ::-webkit-scrollbar {
      width: 10px;
    }

    ::-webkit-scrollbar-thumb {
      cursor: pointer;
    }

    .contentRight {
      width: 100%;
      height: calc(100vh - 131px);
      margin-left: 0px;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 10px 0px 0px 0px;
      background-color: var(--backColor);

      .row {
        width: 100%;
        height: 100%;

        :deep {
          .ant-card-body {
            padding: 12px 0px 0px 0px;
          }
        }

        .itemInfo {
          width: 100%;
          // height: 100%;
          min-height: 300px;
          height: 35vh;

          .calendarNum {
            color: orange;
          }

          :deep {
            .ant-fullcalendar-fullscreen .ant-fullcalendar-date {
              height: 40px;
            }

            .ant-fullcalendar-calendar-body {
              padding: 0px;
            }

            .ant-fullcalendar-header {
              display: none;
            }

            .ant-fullcalendar-content {
              height: 20px;
              position: relative;
              top: -10px;
            }
          }
        }
      }
    }
  }
}

.initiatingPieChartUnWrap {
  ::v-deep {
    .ant-card-body {
      padding: 0px 0px 0px 0px !important;
    }

    .ant-table-scroll {
      .ant-table-header {
        margin-bottom: -12px !important;
      }
    }

    .ant-table-body-outer {

      /* 设置滚动条的背景颜色为灰色 */
      ::-webkit-scrollbar {
        background-color: transparent;
      }

      /* 设置滚动条内滑块的颜色为黑色 */
      ::-webkit-scrollbar-thumb {
        background-color: transparent;
      }

      /* 设置滚动条内的滑块hover效果 */
      ::-webkit-scrollbar-thumb:hover {
        background-color: transparent;
      }
    }
  }
}

.cardWrap {
  &-item {
    // height: calc((100vh - 62px - 40px - 20px - 10px - 30px)/2);
    height: 50vh;

    ::v-deep {
      .ant-card-body {
        height: 100%;
        height: 100%;
      }
    }
  }
}
</style>
